﻿<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
 <script src="js/calendarDateInput.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){


    $(".slidingDiv").hide();
	$(".show_hide").show();
	
	$('.show_hide').click(function(){
	$(".slidingDiv").slideToggle();
	});

});

</script>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("ต้องการจองใช่หรือไม่");
if (r==true)
  {
  alert("ต้องการจอง");
  }
else
  {
  alert("ยกเลิกการจอง");
  }
}
</script>
<link rel="stylesheet" href="css/core.css" type="text/css" />
		
    <script src="js/jquery-1.3.min.js" type="text/javascript"></script>
	
    <script src="js/jMonthCalendar.js" type="text/javascript"></script>
	
	<link rel="stylesheet" type="text/css" href="css/mainstyle.css" />	
	
	
	
	<style type="text/css" media="screen">
		#jMonthCalendar .Meeting { background-color: #DDFFFF;}
		#jMonthCalendar .Birthday { background-color: #DD00FF;}
		#jMonthCalendar #Event_3 { background-color:#0000FF; }
	</style>
	
	<script type="text/javascript" src="js/datepicker.js"></script>
	<script language="JavaScript">
		$(document).ready(function() {

			//When page loads...
			$(".tab_content").hide(); //Hide all content
			$("ul.tabs li:first").addClass("active").show(); //Activate first tab
			$(".tab_content:first").show(); //Show first tab content

			//On Click Event
			$("ul.tabs li").click(function() {

				$("ul.tabs li").removeClass("active"); //Remove any "active" class
				$(this).addClass("active"); //Add "active" class to selected tab
				$(".tab_content").hide(); //Hide all tab content

				var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
				$(activeTab).fadeIn(); //Fade in the active ID content
				return false;
			});

		});
	</script>
    <script type="text/javascript">
        $().ready(function() {
			var options = {
				height: 650,
				width: 980,
				navHeight: 25,
				labelHeight: 25,
				onMonthChanging: function(dateIn) {
					//this could be an Ajax call to the backend to get this months events
					//var events = [ 	{ "EventID": 7, "StartDate": new Date(2009, 1, 1), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description", "CssClass": "Birthday" },
					//				{ "EventID": 8, "StartDate": new Date(2009, 1, 2), "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" }
					//];
					//$.jMonthCalendar.ReplaceEventCollection(events);
					return true;
				},
				onEventLinkClick: function(event) { 
					alert("event link click");
					return true; 
				},
				onEventBlockClick: function(event) { 
					alert("block clicked");
					return true; 
				},
				onEventBlockOver: function(event) {
					//alert(event.Title + " - " + event.Description);
					return true;
				},
				onEventBlockOut: function(event) {
					return true;
				},
				onDayLinkClick: function(date) { 
					alert(date.toLocaleDateString());
					return true; 
				},
				onDayCellClick: function(date) { 
					alert(date.toLocaleDateString());
					return true; 
				}
			};
			
			
			var events = [ 	{ "EventID": 1, "Date": "new Date(2009, 3, 1)", "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description", "CssClass": "Birthday" },
							{ "EventID": 1, "StartDateTime": new Date(2009, 3, 12), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description", "CssClass": "Birthday" },
							{ "EventID": 2, "Date": "2009-04-28T00:00:00.0000000", "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" },
							{ "EventID": 3, "StartDateTime": new Date(2009, 3, 20), "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" },
							{ "EventID": 4, "StartDateTime": "2009-04-14", "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" }
			];
			
			var newoptions = { };
			var newevents = [ ];
			//$.jMonthCalendar.Initialize(newoptions, newevents);

			
			$.jMonthCalendar.Initialize(options, events);
			
			
			
			
			var extraEvents = [	{ "EventID": 5, "StartDateTime": new Date(2009, 3, 11), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description", "CssClass": "Birthday" },
								{ "EventID": 6, "StartDateTime": new Date(2009, 3, 20), "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" }
			];
			
			$("#Button").click(function() {					
				$.jMonthCalendar.AddEvents(extraEvents);
			});
			
			$("#ChangeMonth").click(function() {
				$.jMonthCalendar.ChangeMonth(new Date(2008, 4, 7));
			});
        });
    </script>	
        	<div class="content">	
			<td width="1019px" rowspan="5" valign="top">
				<ul class="tabs">
					<li><a href="#tab1">ค้นหาห้อง</a></li>
					<li><a href="#tab2">ปฏิทิน</a></li>
				</ul>
				<div class="tab_container">
					<div id="tab1" class="tab_content">
						<strong>ประเภทห้อง</strong><br />
								<input type="checkbox" name="option1" value="computer_room">&nbsp;&nbsp;ห้องปฏิบัติการทางคอมพิวเตอร์ 
                            	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<input type="checkbox" name="option2" value="lap_room" checked>&nbsp;&nbsp;ห้องแล็ป<br>
								<br>
                                
                                <strong>จำนวนคอมพิวเตอร์ที่ใช้งาน</strong>&nbsp;&nbsp;
                                <input name="number_computer" type="text" size="5">&nbsp;&nbsp;
                                <strong>เครื่อง</strong>
                                <br><br />
                                
                               <strong>ปฏิทิน</strong> 
                <script>DateInput('date', true, 'yyyy-mm-dd')</script>
                <?php echo $_POST["date"]; ?>
                               <br><br />
                               
                               <strong>เวลา</strong>&nbsp;&nbsp;
                               <SELECT>
                                 <OPTION VALUE="o1">08:30
                                 <OPTION VALUE="o2">09:30
                                 <OPTION VALUE="o3">10:30
                                 <OPTION VALUE="o4">11:30
                                 <OPTION VALUE="o5">13:30
                                 <OPTION VALUE="o6">14:30
                                 <OPTION VALUE="o7">15:30
                                </SELECT>
                                &nbsp;&nbsp;
                                <strong>ถึง</strong>&nbsp;&nbsp;
								<SELECT>
                                 <OPTION VALUE="o1">09:30
                                 <OPTION VALUE="o2">10:30
                                 <OPTION VALUE="o3">11:30
                                 <OPTION VALUE="o4">13:30
                                 <OPTION VALUE="o5">14:30
                                 <OPTION VALUE="o6">15:30
                                 <OPTION VALUE="o7">16:30
                                </SELECT>
                                <br><br />
                                
                                <strong>ซอฟต์แวร์ที่ต้องการใช้</strong><br />
                                <input type="checkbox" name="option1" value="all">&nbsp;&nbsp;ซอฟต์แวร์ทั้งหมด<br />
								<input type="checkbox" name="option2" value="adobe_Professional" checked>&nbsp;&nbsp;Adobe Professional CS5<br />
                                <input type="checkbox" name="option2" value="microsoft" checked>&nbsp;&nbsp;Microsoft - Office 2007 <br />
                                <input type="checkbox" name="option2" value="editplus" checked>&nbsp;&nbsp;Editplus<br />
                                <input type="checkbox" name="option2" value="dreamweaver " checked>&nbsp;&nbsp;Dreamweaver <br />
                                <input type="checkbox" name="option2" value="flash" checked>&nbsp;&nbsp;Flash<br />
                                <input type="checkbox" name="option2" value="other" checked>&nbsp;&nbsp;โปรแกรมอื่นๆ<br />
                                <br /><br />
                                
                                <center><a href="#" class="show_hide">ค้นหาห้อง</a><br /></center> <br><br>
								<div class="slidingDiv">
                                <center>
									<table width="779" height="250" border="1">
									  <tr >
										<td width="54" align="center">ลำดับที่</td>
										<td width="54" align="center">ชื่อห้อง</td>
										<td width="76" align="center">ประเภทห้อง</td>
										<td width="74" align="center">จำนวนผู้ใช้</td>
										<td width="57" align="center">วันที่ใช้</td>
										<td width="58" align="center">เวลาที่ใช้</td>
										<td width="57" align="center">ถึงเวลา</td>
										<td width="79" align="center">สถานะห้อง</td>
										<td width="154" align="center">รูปภาพ</td>
										<td width="52" align="center">จอง</td>
									  </tr>
									  <tr >
										<td align="center">1</td>
										<td align="center">1207</td>
										<td align="center">ห้องแลป</td>
										<td align="center">40</td>
										<td align="center">20/9/54</td>
										<td align="center">09.00</td>
										<td align="center">12.00</td>
										<td align="center"> <font color=green>ปรกติ</font></td>
										<td align="center">&nbsp;</td>
										<td align="center">
									<input type="button" onclick="show_confirm()" value="จอง" /></td>
									  </tr>
									  <tr>
										<td align="center">2</td>
										<td align="center">1408</td>
										<td align="center">ห้องแลป</td>
										<td align="center">40</td>
										<td align="center">20/9/54</td>
										<td align="center">09.00</td>
										<td align="center">12.00</td>
										<td align="center"><font color=red>ปรับปรุง</font></td>
										<td align="center">&nbsp;</td>
										<td align="center"><input type="button" onclick="show_confirm()" value="จอง" /></td>
									  </tr>
									  <tr>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
									  </tr>
									</table><br>
                                    <input type="button" onclick="location.href = 'printexport.php'" value="Export" />
                                    </center>
								</div>
					</div>
					<div id="tab2" class="tab_content">
						<form>
							<table>
								<tr>
									<td>
										ห้องประชุม
									</td>
									<td>
										<input type="radio" name="room" value="1201" /> 1201 &nbsp;&nbsp;
										<input type="radio" name="room" value="1202" /> 1202
									</td>
								</tr>
								<tr>
									<td>
										ห้องLab
									</td>
									<td>
										<input type="radio" name="room" value="1201 A" /> 1201 A
										<input type="radio" name="room" value="1207" /> 1207
										<input type="radio" name="room" value="1302" /> 1302
										<input type="radio" name="room" value="15408" /> 1408
									</td>
								</tr>
							</table>
							&nbsp;&nbsp;
							<div id="jMonthCalendar"></div>
						</form>
					</div>
				</div>
			</td>
		
		</div>
		
	